<template>
   <div class="update_photo">
      <img :src="img" class="img" ref="img" />
      <div class="toolbar">
         <div class="cancel" @click="$emit('close')">
            取消
         </div>
         <div class="confirm" @click="onConfirm">
            完成
         </div>
      </div>
   </div>
</template>

<script>
import { updateUserPhoto } from '../../../api/user'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
export default {
   data() {
      return {
         cropper: null
      }
   },
   props: {
      img: {
         type: [String, Object],
         required: true
      }
   },
   // 获取dom元素
   mounted() {
      const image = this.$refs.img
      this.cropper = new Cropper(image, {
         // 查看模式 默认是0 可以拖动出区域  1在画布之中
         viewMode: 1,
         // 拖动模式  默认任意拖动  move 图片（画布）可以拖动
         dragMode: 'move',
         // 截图的比例 默认 16:9
         aspectRatio: 1,
         // 自动截取区域
         autoCropArea: 1,
         // 截图区域是否可以移动，画布移动
         cropBoxMovable: false,
         // 截图区域的缩放
         cropBoxResizable: false,
         // 背景
         background: false
         // 允许画布拖动，默认 true  可不写
         // movable: true
      })
   },
   methods: {
      onConfirm() {
         // 服务器端用：
         // 得到裁切的参数 getData 基于服务端裁切 把参数传给服务器端
         // this.cropper.getData()
         // 如果是纯客户端的图片裁切，则使用：
         // getCroppedCanvas方法，该方法得到裁切之后的图片对象
         // （类似于URL.createObjectURL 方法得到的文件对象）。
         this.cropper.getCroppedCanvas().toBlob(blob => {
            // 返回 file 类型  对象
            // console.log(blob)
            this.updateUserPhoto(blob)
         })
      },
      async updateUserPhoto(blob) {
         this.$toast.loading({
            message: '保存中...',
            forbidClick: true,
            // 持续展示
            duration: 0
         })
         try {
            // 拿到二进制图片形式对象
            // console.log(blob)
            // 如果是 application/json 格式，传普通 js 对象
            // 如果接口要求 Content-Type 是一个 multipart/form-data
            // 则必须传递 ForData 对象
            // 一般裁剪图片都是这种
            // 构造一个FormData
            const formData = new FormData()
            // 给 FormData 添加值
            formData.append('photo', blob)
            const { data } = await updateUserPhoto(formData)
            // console.log(data)
            // 关闭弹出层
            this.$emit('close')
            // 更新视图
            this.$emit('update-photo', data.data.photo)
            this.$toast.success('更新成功')
         } catch (err) {
            this.$toast.fail('更新失败')
         }
      }
   }
}
</script>

<style lang="less" scoped>
.update_photo {
   background-color: #000;
   height: 100%;
   .toolbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      .cancel,
      .confirm {
         width: 90px;
         height: 90px;
         font-size: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #fff;
      }
   }
}
.img {
   display: block;
   width: 100%;
}
</style>
